<template>
	<view class="city-content">
		<view class="conlation">
			<view class="iconfont icondingwei conlation-left">
				自动定位: 北京
			</view>
			<view class="conlation-right">
				切换<view class="iconfont iconyou"></view>
			</view>
		</view>
		<view class="video-list">
			<view class="item">
				<view class="video">
					<video objectFit="fill" style="width:100%;height:100%;" src="https://vd3.bdstatic.com/mda-mfuf163rfmkn36i7/sc/cae_h264_nowatermark/1624963807340099361/mda-mfuf163rfmkn36i7.mp4?v_from_s=hkapp-haokan-hna&auth_key=1651400188-0-0-5e3241abad6d5cfbcfabe0461349395d&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=2787950436&vid=10554454971571011271&abtest=100815_2-101454_2-101830_1-17451_1&klogid=2787950436"></video>
				</view>
				<view class="img">
					<image class="image-box" src="../static/img/11485474214223046.jpg" mode=""></image>
				</view>
			</view>
			<view class="item">
				<view class="video">
					<video objectFit="fill" style="width:100%;height:100%;"  src="https://vd3.bdstatic.com/mda-mfuf163rfmkn36i7/sc/cae_h264_nowatermark/1624963807340099361/mda-mfuf163rfmkn36i7.mp4?v_from_s=hkapp-haokan-hna&auth_key=1651400188-0-0-5e3241abad6d5cfbcfabe0461349395d&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=2787950436&vid=10554454971571011271&abtest=100815_2-101454_2-101830_1-17451_1&klogid=2787950436"></video>
				</view>
				<view class="img">
					<image class="image-box" src="../static/img/11485474214223046.jpg" mode=""></image>
				</view>
			</view>
			<view class="item">
				<view class="video">
					<video objectFit="fill" style="width:100%;height:100%;"  src="https://vd3.bdstatic.com/mda-mfuf163rfmkn36i7/sc/cae_h264_nowatermark/1624963807340099361/mda-mfuf163rfmkn36i7.mp4?v_from_s=hkapp-haokan-hna&auth_key=1651400188-0-0-5e3241abad6d5cfbcfabe0461349395d&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=2787950436&vid=10554454971571011271&abtest=100815_2-101454_2-101830_1-17451_1&klogid=2787950436"></video>
				</view>
				<view class="img">
					<image class="image-box" src="../static/img/11485474214223046.jpg" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"cityContent",
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.city-content {
	width: 100%;
	background: #000000;
}
.conlation {
	width: 100%;
	height: 40px;
	margin-top: 70px;
	overflow: hidden;
	color: #aaaaaa;
}

.conlation-left {
	float: left;
	font-size: 15px;
	padding-left: 15px;
}

.conlation-right {
	float: right;
	font-size: 15px;
	padding-right: 15px;
	display: flex;
	align-items: center;
}

.video-list {
	width: 100%;
	overflow: auto;
	background: #000000;
}

.item {
	width: 50%;
	float: left;
	position: relative;
	margin-bottom: 10px;
}
.video {
	width: 92%;
	height: 300px;
	margin-left: 4%;
}
.img{
	position: absolute;
	bottom: 7px;
	right: 15px;
}

.image-box {
	width:30px;
	height:30px;
	border-radius: 50%;
}
</style>
